<template>
    <div class="todo-list">
        <transition name="todo" appear>
            <li>
                <label>
                    <input type="checkbox" v-bind:checked="todoObj.done" @change="handleCheck(todoObj.id)">
                    <span v-show="!todoObj.isEdit">{{todoObj.title}}</span>
                    <input type="text" v-show="todoObj.isEdit" :value="todoObj.title" @blur="handleBlur($event)" ref="inputTile">
                </label>
                <button class="btn btn-danger" @click="deleteTodo(todoObj.id)">删除</button>
                <button class="btn btn-edit" @click="handleEdit($event, todoObj)" v-show="!todoObj.isEdit">编辑</button>
            </li>
        </transition>
    </div>
</template>

<script>
    export default {
        name: "Item",
        data() {
            return {
                todo: this.todoObj
            }
        },
        props: ["todoObj", "updateDone", "deleteTodo"],
        methods: {
            handleCheck(id) {
                // console.log(id);
                // 将对应id的done属性改为相反的值
                this.updateDone(id);
            },
            // 编辑
            handleEdit(_, todoObj) {
                // 判断todoObj有没有属性isEdit
                if (Object.prototype.hasOwnProperty.call("isEdit")) {
                    todoObj.isEdit = true;
                } else {
                    this.$set(todoObj, "isEdit", true);
                }
                // $nextTick() DOM更新之后，执行回调函数
                this.$nextTick(function () {
                    // 获取输入框焦点
                    this.$refs.inputTile.focus();
                });
            },
            // 失去焦点
            handleBlur(event) {
                this.todoObj.isEdit = false;
                if (!event.target.value.trim()) {
                    return alert("输入内容不能为空！");
                }
                this.todo.title = event.target.value;
                this.$bus.$emit("_UPDATE_DATA_", this.todo);
            }
        }
    }
</script>

<style scoped lang="less">
    /* item */
    .todo-list {
        li {
            list-style: none;
            height: 36px;
            line-height: 36px;
            padding: 0 5px;
            border-bottom: 1px solid #ddd;
        }

        li label {
            float: left;
            cursor: pointer;
        }

        li label li input {
            vertical-align: middle;
            margin-right: 6px;
            position: relative;
            top: -1px;
        }

        li button {
            float: right;
            display: none;
            margin-top: 3px;
        }

        li:before {
            content: initial;
        }

        li:last-child {
            border-bottom: none;
        }

        li:hover{
            background-color: #ddd;
        }

        li:hover button{
            display: block;
        }
        @keyframes myAnimation {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0px);
            }
        }
        .todo-enter-active {
            animation: myAnimation 0.5s linear;
        }
        .todo-leave-active {
            animation: myAnimation 0.5s linear reverse;
        }
    }
</style>